<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="关注" name="1">
      <NewsLine v-for="(newsline,i) in newsLines" :key="i" :props="newsline" />
    </el-tab-pane>
    <el-tab-pane label="推荐" name="2">推荐</el-tab-pane>
    <el-tab-pane label="资讯" name="3">资讯</el-tab-pane>
    <el-tab-pane label="热榜" name="4">热榜</el-tab-pane>
    <el-tab-pane label="专家推荐" name="5">专家推荐</el-tab-pane>
  </el-tabs>
</template>

<script lang='ts'>
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class extends Vue {
  activeName: string = "1";
  mounted() {
    this.$store.commit("scrollModule/loadNewsFlow");
  }
  get newsLines() {
    return this["$store"].state.scrollModule.newsLines;
  }

  handleClick(tab: any, event: any) {
    console.log(tab, event);
  }
}
</script>

<style lang='less' scoped>
.infinite-list {
  .wh(100%, 1200px);
}
::v-deep(.el-tabs__nav-wrap::after) {
  background-color: #f0f0f0;
  height: 1px;
}
</style>